<template>
  <div class="flg-rate">
    <div class="header">
      <h1 class="title">
        查询条件
      </h1>
      <div class="form-wrapper cargo-single-form">
        <el-form :inline="true" class="demo-form-inline">
          <el-row>
            <el-col :span="4">
              <el-form-item label="姓名">
                <el-input size="mini" v-model="parameters.realname"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="部门">
                <el-input size="mini" v-model="parameters.department"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-button size="mini" type="primary" @click="get">查询</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="table-wrapper">
      <h1 class="title">
        用户管理
      </h1>
      <div class="btn-wrapper">
        <el-button size="mini" @click="add">新增</el-button>
        <el-button size="mini" @click="edit">修改</el-button>
        <el-button size="mini" @click="remove">删除</el-button>
        <el-select v-model="parameters.dataSourceName" placeholder="请选择" @change="changeDataSource">
          <el-option
            v-for="dataSource in dataSources"
            :key="dataSource.value"
            :label="dataSource.value"
            :value="dataSource.value">
          </el-option>
        </el-select>
      </div>
      <div class="table">
        <el-table
          ref="userTable"
          highlight-current-row
          v-loading="tableLoading"
          @selection-change="userSelectionChange"
          :data="tableData"
          @row-click="clickRow"
          border
          style="width: 100%">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="REALNAME"
            label="姓名">
          </el-table-column>
          <el-table-column
            prop="DEPARTMENT"
            label="部门">
          </el-table-column>
          <el-table-column
            prop="USERNAME"
            label="用户名">
          </el-table-column>
          <div slot="empty">
            暂无数据
          </div>
        </el-table>
      </div>
    </div>
    <div class="detail-wrapper">
      <h1 class="title">
        详细信息
      </h1>
      <div class="btn-wrapper">
        <el-button size="mini" @click="cancel" :disabled="disabledState">取消</el-button>
        <el-button size="mini" :disabled="disabledState" :loading="submitLoading" @click="submit">保存</el-button>
      </div>
      <div class="form-wrapper cargo-form">
        <el-form :inline="true" class="demo-form-inline">
          <el-row>
            <el-col :span="5">
              <el-form-item label="姓名">
                <el-input size="mini" v-model="formData.REALNAME" :disabled="disabledState" ref="firstInput"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="部门">
                <el-input size="mini" v-model="formData.DEPARTMENT" :disabled="disabledState"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="用户名">
                <el-input size="mini" v-model="formData.USERNAME" :disabled="disabledState"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {formState} from 'common/js/config'
  import apiUser from 'api/user'
  import apiCommon from 'api/common'
  import qs from 'qs'

  export default {
    created() {
      if (this.dataSources.length > 0) {
        this.parameters.dataSourceName = this.dataSources[0].value
      }
      this.get()
    },
    mounted() {
    },
    data() {
      return {
        // 表单新增 修改状态
        state: '',
        submitLoading: false,
        tableLoading: false,
        tableData: [],
        formData: {},
        activeRowIndex: 0,
        dataSources: [{
          value: 'dataSource'
        }, {
          value: 'dataSource1'
        }, {
          value: 'dataSource2'
        },
        ],
        parameters: {},
        selections: []
      }
    },
    methods: {
      userSelectionChange(selection) {
        let ids = [];
        selection.forEach((select) => {
          if (select.GUID) {
            ids.push(select.GUID)
          }
        })
        this.selections = ids;
      },
      changeDataSource(value) {
        this.parameters.dataSourceName = value
        this.get()
      },
      // 点击行
      clickRow(row, event, column) {
        this.state = ''
        this.cacheRow = JSON.parse(JSON.stringify(row))
        this.formData = JSON.parse(JSON.stringify(row))
        this.$refs.userTable.setCurrentRow(row)
      },
      // 被点击行的样式
      activeRow(row) {
        if (row.rowIndex === this.activeRowIndex) {
          return 'active-row'
        }
      },
      // 取消
      cancel() {
        if (this.state === formState.EDIT) {
          this.formData = this.cacheRow;
        } else {
          this.formData = {};
        }
        this.state = ''
        this.$refs.userTable.setCurrentRow({})
      },
      // 新增数据
      add() {
        this.state = formState.ADD;
        this.formData = {}
        this.$nextTick(() => {
          this.$refs.firstInput.focus()
        })
      },
      handleResponseSuccess(msg) {
        this.submitLoading = false
        this.state = ''
        this.$message.success('更新成功')
        this.get()
      },
      // 提交表单
      submit() {
        this.submitLoading = true;
        if (this.state === formState.ADD) {
          console.log(this.submitFormData)
          apiCommon.post('/user/save', Object.assign(this.formData, {dataSourceName: this.parameters.dataSourceName})).then((response) => {
            this.handleResponseSuccess('新增成功');
          })
        } else if (this.state === formState.EDIT) {
          apiCommon.post('/user/edit', Object.assign(this.formData, {dataSourceName: this.parameters.dataSourceName})).then((response) => {
            this.handleResponseSuccess('更新成功');
          })
        }
      },
      remove() {
        this.tableLoading = true
        apiCommon.postJSON('/user/remove', {
          list: this.selections,
          dataSourceName: this.parameters.dataSourceName
        }).then((response) => {
          this.handleResponseSuccess('删除成功')
        })
      },
      update() {
        this.state = formState.EDIT
      },
      get() {
        this.formData = {};
        this.tableData = [];
        this.tableLoading = true
        apiCommon.get(this.parameters).then((response) => {
          this.tableData = response.data
          this.tableLoading = false
        })
      },
    },
    computed: {
      disabledState() {
        return !(this.state === formState.ADD || this.state === formState.EDIT)
      }
    },
    components: {}
  }
</script>

<style lang="stylus" scoped>
  @import "~common/stylus/variable.styl"

  .flg-rate
    .header
      padding 20px
      background $color-panel
      margin-bottom 20px
      .title
        padding-bottom 10px
        font-weight 700
      .form-wrapper
        background $color-panel-grey
        padding 10px
    .table-wrapper
      padding 20px
      background $color-panel
      margin-bottom 20px
      .title
        padding-bottom 0 10px
        font-weight 700
      .btn-wrapper
        padding 10px
      .table
        padding 0 10px
    .detail-wrapper
      padding 20px
      background $color-panel
      .title
        font-weight 700
      .btn-wrapper
        padding 10px
      .form-wrapper
        background $color-panel-grey
        padding 10px
        margin 0 10px
</style>
